$(function () {
    let $image = $("#image");
    var option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);
    $("#chooseFile").on("click", function () {
        $("#file").trigger("click");
    })
    $('#file').on('change', function () {
        // console.log(12)
        var fileObj = this.files[0];
        // 3.2 为文件对象创建临时的url
        if (fileObj === undefined) {
            return layui.layer.msg("上传头像不能为空")
        }
        var url = URL.createObjectURL(fileObj);
        // console.log(url);
        // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        $image.cropper("destroy").attr("src", url).cropper(option);
        // $image.cropper('replace', url);
    });
    $('#sure').on('click', function () {
        // 1. 剪裁图片，得到canvas
        var dataURL = $image.cropper('getCroppedCanvas', {
            width: 30,
            height: 30
        }).toDataURL("image/png");
        // 2. 把canvas转成base64格式字符串
        // var base64 = dataURL.toDataURL();
        // console.log(base64)
        // 3. ajax提交即可
        axios({
            method: "POST",
            url: "/my/update/avatar",
            data: "avatar=" + encodeURIComponent(dataURL)
        }).then(res => {
            console.log(res);
            if(res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg("修改头像成功");
            window.parent.getuserinfo();
        })
    })
})